Hi,我是元尧。欢迎长按下图二维码加我微信,带你进设计师交流群,与上万小伙伴一起交流成长!
「👇 添加好友请备注:设计交流」
「防呆设计」手法作为一种预防、矫正错误行为的手段,经常被用于交互设计中,让用户不需要花费注意力就可以正确无误地完成操作。本文重点分享四种常见的「防呆设计」手法设计案例:
- 断根
- 保险
- 标示
- 警告
RULE 1
断根
「断根」是指将发生错误的原因从根本上排除,不给用户犯错的机会。在交互设计中,最常见的设计方法就是使用置灰 / 禁用效果。 案例 1 美团外卖对于在休息 / 暂不接单的店铺,除了使用「休息中」的 Tag 进行标注,还使用置灰的效果,让用户对于店铺营业情况一目了然,不会误点进入:
案例 2 支付宝理财产品阅读协议,在用户勾选前一直会显示「请勾选」,页面的确定按钮在协议签署前为不可点击状态:
案例 3 用户用 Gmail 写邮件时,可以设置邮件为「保密邮件」,收件人将无法进行转发、复制、下载或打印邮件;也可以设定保密邮件的可读时间,到期后邮件内容会自动消失,来确保信息的保密性:
RULE 2
保险
「保险」是指按照顺序运行两个以上的动作才能完成操作,多加一步操作步骤,给用户创造更多的思考机会和时间。在交互设计中的典型用法是增加弹窗、链接等形式提供更多信息,让用户进一步确认。
案例 1 微信转账,连续转给好友同样金额的两笔钱,且第一笔好友未接收,系统会发出提醒,让用户再次确认,避免重复打款:
案例 2 被从微信群踢出的用户,如果再次申请加入该群,该群的管理员可以在申请中查看 ta 曾经在群中的聊天记录,判断 ta 是否适合入群: 案例 3 在一些重要的决策或不可逆的操作行为中,二次弹窗确认尤为常见。比如当用户在填写信息时点击「作废」,系统会给出提示让用户再次考虑:
RULE 3
标示
「标示」是指运用线条粗细、形状、颜色等区别以方便识别,提高易识别度。交互设计中多以颜色鲜亮的小色块、圆点等进行示意。
案例 1 钉钉的图片保存到本地的功能,做了很好的提示,下载过的图片会带有绿色的「对勾」,避免用户多次重复保存图片: 案例 2 微信发朋友圈的分组功能,你可以选择「谁可以看」和「谁不可看」,可以看用的是绿色字,不可以看用的是红色字,很易于区分,不用担心会搞混或错用:
案例 3 钉钉的会议未按时参会的提醒,用红色标签对时间进行重点标示: 案例 4 使用 Sketch 导出同名同格式的文件时,系统会在弹窗中将「取消」作为主按钮的形式呈现,避免用户因为忘记重命名而覆盖之前的导出的同名文件: 案例 5 钉钉和阿里的出差系统打通,当员工提交了出差申请,到了出差的那一天,钉钉上状态会自动切换成 「✈️出差中」,方便其他同事了解你的状态:
案例 6 Google 的标签页,可以被分组,标记颜色和重命名,可以一定程度上缓解因标签页开得太多而找不到的情况:
案例 7 疫情期间,很多小区的大门仅供行人通行,只有个别大门是行人和车辆都可通行。高德地图 App 会给每个小区的门标注好通行权限,方便开车的用户选择合适的门进入小区,不过个人感觉这个信息可以标注得更明显一些:
RULE 4
警告
「警告」是指将不正常或即将要出问题的情况,通过颜色、灯光、声音、动效等明显、特殊的方式进行警告,提醒用户及时修正错误。交互设计可以借鉴工业设计中的报警器等产品的功能,用弹窗、灯光和声音等对用户进行提示。 案例 1 在铁路 12306 上购票时,如果选的列车时间距离现在 1 小时内,会弹出弹窗提示发车时间与现在较近,提醒用户注意行程时间:
案例 2 京东 App 会在用户使用移动网络播放的环境下,提示用户注意流量损耗:
案例 3 上海的买菜 App 在疫情期间菜不好抢,盒马会在你加购每一件商品的过程中,都提示运力不足,让用户再做考虑:
还没看够?😊 公众号后台回复「好设计」看更多设计案例!
我在每日输出的知识内容中,选择了一部分进行汇总,梳理了从【接到设计需求到产出设计沉淀】的完整流程。想要看到可以在公众号后台留言 “设计思维” 👇👇👇
与【工作经验和工作方法】相关的精华内容,在公众号后台留言 “工作经验” 👇👇👇
如果你还有其他设计、工作、作品集、面试相关的问题,欢迎向我提问。如果你想加入设计师交流群,也可以识别二维码👇👇👇添加我的微信。添加好友请备注:设计交流。
详解丨一文带你用好 Radio 和 Tabs!
经验|设计还原度低?试试这些方法!
经验|详解 B 端组件的更新优化流程!
了解更多设计理念和设计方法